<template>
  <div>
    <el-dialog
      :title="showTitle"
      :visible.sync="showDialog"
      width="700px"
      @close="btnCancel"
    >
      <el-tabs
        v-model="workPatternType"
        class="tab-box"
      >
        <el-tab-pane
          v-if="!editworkPatternId || (editworkPatternId && firstFormData.id)"
          label="礼拜制"
          name="1"
        >
          <el-form
            ref="firstForm"
            :rules="rules"
            :model="firstFormData"
            label-width="130px"
            style="width: 100%"
          >
            <el-form-item
              label="工作模式名称："
              prop="name"
            >
              <el-input
                v-model="firstFormData.name"
                placeholder="请填写工作模式名称"
              >
              </el-input>
            </el-form-item>
            <el-form-item
              label="连续工作天数："
              style="margin-bottom: 0px;"
            >
              <el-checkbox
                v-model="firstFormData.monday"
                :true-label="1"
                :false-label="2"
              >周一</el-checkbox>
              <el-checkbox
                v-model="firstFormData.tuesday"
                :true-label="1"
                :false-label="2"
              >周二</el-checkbox>
              <el-checkbox
                v-model="firstFormData.wednesday"
                :true-label="1"
                :false-label="2"
              >周三</el-checkbox>
              <el-checkbox
                v-model="firstFormData.thursday"
                :true-label="1"
                :false-label="2"
              >周四</el-checkbox>
              <el-checkbox
                v-model="firstFormData.friday"
                :true-label="1"
                :false-label="2"
              >周五</el-checkbox>
              <el-checkbox
                v-model="firstFormData.saturday"
                :true-label="1"
                :false-label="2"
              >周六</el-checkbox>
              <el-checkbox
                v-model="firstFormData.sunday"
                :true-label="1"
                :false-label="2"
              >周日</el-checkbox>
            </el-form-item>
            <div class="tips">选中为工作时间，未选中为休息时间</div>
            <el-form-item
              label="工作时间："
              prop="time"
            >
              <el-time-picker
                v-model="firstFormData.time"
                is-range
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围"
                format="HH:mm"
                value-format="HH:mm"
              >
              </el-time-picker>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane
          v-if="!editworkPatternId || (editworkPatternId && secondFormData.id)"
          label="连续制"
          name="2"
        >
          <el-form
            ref="secondForm"
            :rules="rules"
            :model="secondFormData"
            label-width="130px"
            style="width: 100%"
          >
            <el-form-item
              label="工作模式名称："
              prop="name"
            >
              <el-input
                v-model="secondFormData.name"
                placeholder="请填写工作模式名称"
              >
              </el-input>
            </el-form-item>
            <el-form-item
              label="连续工作天数："
              prop="workDayNum"
            >
              上
              <el-input
                v-model="secondFormData.workDayNum"
                placeholder="请输入"
                style="width: 110px; margin-left: 10px; margin-right: 21px"
              >
                <span
                  slot="suffix"
                  style="
                    color: #20232a;
                    font-weight: 400;
                    font-size: 14px;
                    font-family: PingFangSC, PingFangSC-Regular;
                    margin-right: 14px;
                  "
                >天</span>
              </el-input>
              休
              <el-input
                v-model="secondFormData.restDayNum"
                placeholder="请输入"
                style="width: 110px"
              >
                <span
                  slot="suffix"
                  style="
                    color: #20232a;
                    font-weight: 400;
                    font-size: 14px;
                    font-family: PingFangSC, PingFangSC-Regular;
                    margin-right: 14px;
                  "
                >天</span>
              </el-input>
            </el-form-item>
            <el-form-item
              label="工作时间："
              prop="time"
            >
              <el-time-picker
                v-model="secondFormData.time"
                is-range
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围"
                format="HH:mm"
                value-format="HH:mm"
              >
              </el-time-picker>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
      <div
        slot="footer"
        class="dialog-footer"
        style="text-align: center"
      >
        <el-button
          class="save-btn"
          @click="btnOK"
        >确认</el-button>
        <el-button
          class="cancel-btn"
          @click="btnCancel"
        >取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { addWorkHistory, workHistoryInfo, updateWorkHistory } from '@/api/transit'
export default {
  props: {
    currentNodeId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      showDialog: false,
      workPatternType: '1',
      editworkPatternId: null,
      firstFormData: {
        name: '',
        monday: 2,
        tuesday: 2,
        wednesday: 2,
        thursday: 2,
        friday: 2,
        saturday: 2,
        sunday: 2,
        workStartMinute1: 540,
        workEndMinute1: 1080,
        time: ['09:00', '18:00']
      },
      secondFormData: {
        name: '',
        workStartMinute1: 540,
        workEndMinute1: 1080,
        workPatternType: '1',
        time: ['09:00', '18:00'],
        workDayNum: null,
        restDayNum: null
      },
      rules: {
        name: [
          { required: true, message: '工作模式名称不能为空', trigger: 'blur' }
        ],
        time: [
          { required: true, message: '工作时间不能为空', trigger: 'change' }
        ],
        workDayNum: [
          { required: true, validator: (rule, value, callback) => {
            if (!this.secondFormData.workDayNum || !this.secondFormData.restDayNum) {
              callback(new Error('连续工作天数不能为空'))
            } else {
              callback()
            }
          }, trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    showTitle() {
      return this.editworkPatternId ? '编辑工作模式' : '新增工作模式'
    }
  },
  methods: {
    openDialog() {
      this.workPatternType = '1'
      this.showDialog = true
    },
    btnCancel() {
      this.showDialog = false
      if (this.workPatternType === '1') {
        this.$refs.firstForm.resetFields()
      } else {
        this.$refs.secondForm.resetFields()
      }
      this.editworkPatternId = ''
      this.firstFormData = {
        name: '',
        monday: 2,
        tuesday: 2,
        wednesday: 2,
        thursday: 2,
        friday: 2,
        saturday: 2,
        sunday: 2,
        workStartMinute1: 540,
        workEndMinute1: 1080,
        workPatternType: '1',
        time: ['09:00', '18:00']
      }
      this.secondFormData = {
        name: '',
        workStartMinute1: 540,
        workEndMinute1: 1080,
        workPatternType: '1',
        time: ['09:00', '18:00'],
        restDayNum: null,
        workDayNum: null
      }
    },
    timeToMinutes(time) {
      return Number(time.slice(0, 2)) * 60 + Number(time.slice(3))
    },
    minutesToTime(minutes) {
      let h = parseInt(minutes / 60)
      let m = parseInt(minutes % 60)
      h = h < 10 ? '0' + h : h
      m = m < 10 ? '0' + m : m
      return `${h}:${m}`
    },
    btnOK() {
      let res = null
      let msg = '新增'
      if (this.workPatternType === '1') {
        this.$refs.firstForm.validate(async (isOK) => {
          if (isOK) {
            this.firstFormData.workPatternType = this.workPatternType
            this.firstFormData.workStartMinute1 = this.timeToMinutes(this.firstFormData.time[0])
            this.firstFormData.workEndMinute1 = this.timeToMinutes(this.firstFormData.time[1])
            if (this.firstFormData.id) {
              res = await updateWorkHistory(this.firstFormData)
              msg = '更新'
            } else {
              res = await addWorkHistory(this.firstFormData)
            }
            if (res.code === 200) {
              this.$message.success(`${msg}工作模式成功`)
              this.$emit('updateWorkPatternList')
            } else {
              this.$message.error(res.msg)
            }
            this.btnCancel()
          }
        })
      } else {
        this.$refs.secondForm.validate(async (isOK) => {
          if (isOK) {
            this.secondFormData.workPatternType = this.workPatternType
            this.secondFormData.workStartMinute1 = this.timeToMinutes(this.secondFormData.time[0])
            this.secondFormData.workEndMinute1 = this.timeToMinutes(this.secondFormData.time[1])
            if (this.secondFormData.id) {
              res = await updateWorkHistory(this.secondFormData)
              msg = '更新'
            } else {
              res = await addWorkHistory(this.secondFormData)
            }
            if (res.code === 200) {
              this.$message.success(`${msg}工作模式成功`)
              this.$emit('updateWorkPatternList')
            } else {
              this.$message.error(res.msg)
            }
            this.btnCancel()
          }
        })
      }
    },
    async getWorkPatternDetail() {
      this.editworkPatternId = this.currentNodeId
      const { data } = await workHistoryInfo(this.currentNodeId)
      this.workPatternType = String(data.workPatternType)
      if (this.workPatternType === '1') {
        this.firstFormData = data
        this.$set(this.firstFormData, 'time', [this.minutesToTime(this.firstFormData.workStartMinute1), this.minutesToTime(this.firstFormData.workEndMinute1)])
      } else {
        this.secondFormData = data
        this.$set(this.secondFormData, 'time', [this.minutesToTime(this.secondFormData.workStartMinute1), this.minutesToTime(this.secondFormData.workEndMinute1)])
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.add-form-dialog {
  ::v-deep .el-dialog__body {
    padding: 30px 60px 0 !important;
  }
}
.tab-box {
  ::v-deep .el-tabs__item.is-active {
    color: #20232a;
    font-size: 16px;
    font-weight: 700;
  }
  ::v-deep .el-tabs__active-bar {
    background-color: #e15536;
  }
  ::v-deep .el-checkbox {
    margin-right: 8px;
  }
  .tips {
    margin-left: 130px;
    margin-bottom: 14px;
    color: #bac0cd;
  }
}
</style>

